<template>
    <div class="message_box">
        <div class="info_chang_search">
            <div class="tabs">当前位置：<span @click="$router.push({name: 'home'})">首页</span>>特色服务</div>
            <search-box></search-box>
        </div>
        <div class="serve_center_content">
            <div class="left_class">
                <div class="item_box" v-for="(item,index) in newsGroup" :key="index">
                    <div class="item_one_child">{{item.name}}</div>
                    <div class="item_two_child" :class="{'active_title':items.id==contentInfo.id}" @click="changTitle(items.id)"
                         v-for="(items,indexs) in item.list"
                         :key="indexs">{{items.title}}
                    </div>
                </div>
            </div>
            <div class="right_box">
                <div class="title_info">特色服务</div>
                <div class="box_infos">
                    <div class="title_info_case">{{contentInfo.title}}</div>
                    <!--                    <div class="title_info_time" v-if="contentInfo.time">发布于{{contentInfo.time}}</div>-->
                    <div class="txt" v-html="contentInfo.text"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getNewsGroup, getNewsInfo} from "@/api/apis";
    import SearchBox from "@/components/searchBox";

    export default {
        name: "TechnologyCenter",
        components: {SearchBox},
        data() {
            return {
                newsGroup: [],
                contentInfo: {},
                activeGroup: {}
            }
        },
        mounted() {
            this.GetNewsGroup()
        },
        methods: {
            changTitle(e) {
                this.$router.push({name: 'characteristic', query: {id: e}})
            },
            GetNewsGroup() {
                let data = {type: 4}
                getNewsGroup(data).then(res => {
                    this.newsGroup = res.data;
                    this.showGroupView();
                });
            },
            showGroupView() {
                if (this.newsGroup.length) {
                    if (this.$route.query.child) {
                        for (let i in this.newsGroup) {
                            let item = this.newsGroup[i];
                            if (item.id == this.$route.query.child) {
                                this.activeGroup = item;
                            }
                        }
                    }
                    if (!this.activeGroup.id) {
                        this.activeGroup = this.newsGroup.slice(0, 1).shift();
                    }
                    this.GetNewsInfo();
                }
            },
            GetNewsInfo() {
                if (this.activeGroup.list && this.activeGroup.list.length) {
                    let query = {};
                    if (this.$route.query.id) {
                        query.id = this.$route.query.id;
                    } else {
                        let firstArticle = this.activeGroup.list.slice(0, 1).shift();
                        query.id = firstArticle.id;
                    }
                    getNewsInfo(query).then(res => {
                        this.contentInfo = res.data
                    });
                }
            }
        },
        watch: {
            $route() {
                this.showGroupView();
            }
        }
    }
</script>

<style scoped lang="less">
    .message_box {
        width: 1200px;
        margin: 0 auto;
        padding: 11px 0 51px;
        min-height: calc(100vh - 62px);
        
        .info_chang_search {
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: space-between;
            
            .tabs {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
        }
        
        .serve_center_content {
            margin-top: 27px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            
            .left_class {
                width: (217px - 42px);
                min-height: 702px;
                padding: 21px;
                border: 1px solid #E9E9E9;
                overflow: hidden auto;
                
                .item_box {
                    margin-bottom: 21px;
                    
                    .item_one_child {
                        margin-bottom: 14px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        line-height: 17px;
                        color: #000000;
                    }
                    
                    .item_two_child {
                        margin-bottom: 14px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 17px;
                        color: #9D9D9D;
                    }
                    
                    .active_title {
                        color: #B11E24;
                    }
                }
            }
            
            .right_box {
                width: 955px;
                
                .title_info {
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    color: #000000;
                    padding-bottom: 20px;
                    border-bottom: 1px solid #000000;
                }
                
                .box_infos {
                    margin-top: 28px;
                    
                    .title_info_case {
                        font-size: 20px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #000000;
                        text-align: center;
                    }
                    
                    .title_info_time {
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        text-align: center;
                        margin-top: 15px;
                    }
                    
                    .txt {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 24px;
                        color: #000000;
                        
                        /deep/ img {
                            max-width: 100%;
                            height: auto;
                        }
                    }
                }
            }
        }
    }
</style>
